<template>
	<view class="container">
	<!-- 	<kg-custom :isBack="true" bgColor="bg-white">
			
			<block slot="left">
				<view class="flex justify-start align-center bg-F4F4F4 padding-left round margin-left-sm" style="height: 70rpx;width: 460rpx;">
					<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 25rpx;height: 25rpx;"></image>
					<input type="text" value="" class="text-13 f-grow1 padding-left-sm" placeholder="搜索分类名称" />
				</view>
			</block>
		</kg-custom> -->
		<view class="flex">
			<scroll-view class="VerticalNav" :scroll-left="scrollTop" scroll-y scroll-with-animation style="height:100vh">
				<!-- <view class="cu-item width-sub flex justify-center align-center" :class="tabCur==999?'on':''" @tap="TabSelect"
				 :data-id="999">
					推荐分类
				</view> -->
				<view class="cu-item width-sub flex justify-center align-center" :class="item.id==tabCur?'on':''" v-for="item in classification1" @tap="TabSelect"
				 :data-id="item.id">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:100vh">
			 <view class="cu-list grid col-3 no-border">
			 	<view class="cu-item flex justify-center align-center flex-direction" v-for="item in classification2" @click="toPage(type==1?'/filePage/pages/goods-list/goods-list?secondCategoryId=' + item.id:'/filePage/pages/verified/verified?sysCategoryId=' + item.id + '&sysCategoryName=' + item.name)">
			 		<image :src="item.icon" mode="" style="width: 48rpx;height: 48rpx;"></image>
			 		<text>{{item.name}}</text>
			 	</view>
			 </view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				classification1:[],
				classification2:[],
				tabCur: '',
				scrollTop: 0,
				type:''
			};
		},
		onLoad(options) {
			if(options.type) this.type = options.type
			this.getClassification()
		}
		,
		methods:{
			toPage(url){
						this.$util.openNewPage(url)
			},
			async getClassification() {
				const [err, res] = await this.$get(this.$api.home_categoryTreeList,{
					type:this.type
				})
				if (res) {
					this.classification1 = res.data
					if(this.classification1.length>0){
						this.tabCur = this.classification1[0].id
						this.getClassification2()
					}
					
				}
			},
			async getClassification2() {
				const [err, res] = await this.$get(this.$api.home_productCateList,{
					parentId:this.tabCur,
					type:this.type
				})
				if (res) {
					this.classification2 =res.data
					// console.log(res)
				}
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.scrollTop = (e.currentTarget.dataset.id - 1) * 60
				this.getClassification2()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.VerticalNav{
		width: 220rpx;
		.cu-item{
			height: 100rpx;
		}
		.on{
			background: #fff;
		}
	}
</style>
